<!DOCTYPE html>
<html>
  <!-- Html Head Tag-->
  <head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <meta name="author" content="vampire624">
  <!-- Open Graph Data -->
  <meta property="og:title" content="如何创建hexo博客"/>
  <meta property="og:description" content="凡是过往，皆为序章。" />
  <meta property="og:site_name" content="时光沙漏"/>
  <meta property="og:type" content="article" />
  <meta property="og:image" content="http://vampire624.top"/>
  
    <link rel="alternate" href="/atom.xml" title="时光沙漏" type="application/atom+xml">
  
  
    <link rel="icon" href="/favicon.png">
  

  <!-- Site Title -->
  <title>时光沙漏</title>

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="/css/bootstrap.min.css">
  <!-- Custom CSS -->
  
  <link rel="stylesheet" href="/css/style.light.css">

  <!-- Google Analytics -->
  
    <script>
        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
                    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
                m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
        })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

        ga('create', 'UA-106015191-1', 'auto');
        ga('send', 'pageview');
    </script>


</head>

  <body>
    <!-- Page Header -->


<header class="site-header header-background" style="background-image: url(/img/default-banner-dark.jpg)">
  <div class="container">
    <div class="row">
      <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
        <div class="page-title with-background-image">
          <p class="title">如何创建hexo博客</p>
          <p class="subtitle"></p>
        </div>
        <div class="site-menu with-background-image">
          <ul>
            
              <li>
                <a href="/">
                  
                  Home
                  
                </a>
              </li>
            
              <li>
                <a href="/archives">
                  
                  Archives
                  
                </a>
              </li>
            
              <li>
                <a href="https://github.com/vampire624">
                  
                  Github
                  
                </a>
              </li>
            
              <li>
                <a href="mailto:vampire_624@yeah.net">
                  
                  Email
                  
                </a>
              </li>
            
          </ul>
        </div>
      </div>
    </div>
  </div>
</header>


<article>
  <div class="container typo">
    <div class="row">
      <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
        <div class="post-info text-muted">
          
            <!-- Author -->
            <span class="author info">By vampire624</span>
          
          <!-- Date -->
          <span class="date-time info">On
            <span class="date">2017-09-06</span>
            <span class="time">10:55:46</span>
          </span>
          
          <!--  Categories  -->
            <span class="categories info">Under 

<a href="/categories/blog/">blog</a>
</span>
          
        </div>
        <!-- Tags -->
        
          <div class="post-tags text-muted">
            Tags: 

<a class="tag" href="/tags/blog/">#blog</a> <a class="tag" href="/tags/nodejs/">#nodejs</a> <a class="tag" href="/tags/hexo/">#hexo</a> <a class="tag" href="/tags/github/">#github</a>


          </div>
        
        <!-- Post Main Content -->
        <div class="post-content">
          <p>当前使用博客分享个人的技术文章和情感文字俨然成为潮流，作为技术小白如何才能快速打造一个属于自己的个人博客呢？hexo其实就是你的不二之选。</p>
<a id="more"></a> 
<h1 id="打造属于自己的个人博客"><a href="#打造属于自己的个人博客" class="headerlink" title="打造属于自己的个人博客"></a>打造属于自己的个人博客</h1><h2 id="安装hexo"><a href="#安装hexo" class="headerlink" title="安装hexo"></a>安装hexo</h2><p>首先你需要安装有nodejs，nodejs自身带有安装包工具npm，如何安装？（本文使用linux，其他OS类似），安装非常方便，点击<a href="http://nodejs.cn" title="nodejs" target="_blank" rel="external">这里</a>，网上教程很多，这里不再赘述。</p>
<p>打开命令行工具。</p>
<h4 id="第一步："><a href="#第一步：" class="headerlink" title="第一步："></a>第一步：</h4><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$ npm i hexo-cli -g</div></pre></td></tr></table></figure>
<h4 id="第二步："><a href="#第二步：" class="headerlink" title="第二步："></a>第二步：</h4><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$ hexo init yourFolderName</div></pre></td></tr></table></figure>
<h4 id="第三步："><a href="#第三步：" class="headerlink" title="第三步："></a>第三步：</h4><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$ <span class="built_in">cd</span> yourFolderName</div></pre></td></tr></table></figure>
<h4 id="第四步："><a href="#第四步：" class="headerlink" title="第四步："></a>第四步：</h4><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$ npm i</div></pre></td></tr></table></figure>
<h4 id="最后一步（本地）："><a href="#最后一步（本地）：" class="headerlink" title="最后一步（本地）："></a>最后一步（本地）：</h4><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$ hexo server</div></pre></td></tr></table></figure>
<p>这样，在浏览器中输入<code>127.0.0.1:4000</code>就可以看到啦。<br>但是里面的很多信息都是原作者的，所以我们需要进行一番修改，打开项目文件夹（yourFolderName）根目录下的<code>_config.yml</code>文件，修改部分关键字，（注意每个关键字后面都有空格！）</p>
<pre><code># Site
title: 博客名字
subtitle: blog副标题
description: 可以使你喜欢的一句话
author: ***
language: zh-CN
timezone: Asia/Shanghai
</code></pre><p>像上面这样，还有很多配置项可以更改，都是一些简单的英文，自己摸索啦。</p>
<h2 id="部署上线"><a href="#部署上线" class="headerlink" title="部署上线"></a>部署上线</h2><p>下面我们需要部署上线，如果你是学生，其实可以尝试购买<a href="https://www.aliyun.com" title="aliyun" target="_blank" rel="external">aliyun</a>虚拟主机，但是需要一些linux以及服务器的各种配置，但是也是学习的过程了，对于想要马上看到自己博客能够部署上线的同学，那就尝试使用<a href="https://github.com" title="github" target="_blank" rel="external">github</a>，英文网站当然是，所以劳烦多学点英语哇，注册一个账号，新建一个repo， <strong>注意！！！</strong> 重点来了，repo的名字只能是你的github用户名，<code>yourgithubName.github.io</code>,github 能为我们提供page服务，非常轻松，国内的<a href="https://oschina.com" target="_blank" rel="external">码云</a> 也可以提供类似的功能，同学们可以自行百度啦，这样我们就有了一个可以存放我们代码的地方了，起到提供服务器的作用。</p>
<p>接下来，我们需要在开始的配置文件<code>_config.yml</code>中修改和添加最下面一行：</p>
<pre><code># Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
    type: git
    repo: https://github.com/yourgithubName/yourgithubName.github.io.git
    branch: master
</code></pre><p>修改后和上面一直，要把自己的github名字换掉！<br>接下来，需要安装一个部署工具，在根目录下执行：</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$ npm install hexo-deployer-git --save</div></pre></td></tr></table></figure>
<p>这样就可以开始正式部署blog了，想想都有些小激动呢.-.</p>
<h4 id="同样三步走，首先执行："><a href="#同样三步走，首先执行：" class="headerlink" title="同样三步走，首先执行："></a>同样三步走，首先执行：</h4><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$ hexo clean</div></pre></td></tr></table></figure>
<h4 id="其次："><a href="#其次：" class="headerlink" title="其次："></a>其次：</h4><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$ hexo generate</div></pre></td></tr></table></figure>
<h4 id="最后："><a href="#最后：" class="headerlink" title="最后："></a>最后：</h4><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$ hexo deploy</div></pre></td></tr></table></figure>
<p>这样就大功告成了，访问<code>yourgithubName.github.io</code>就可以看到刚才在本地的项目了！但是确实在互联网上！而不是你的本地。</p>
<p>最后我们需要写自己的博客要怎么样呢？那就在根目录下的<code>/source/_posts/</code>里面添加新的md文件，md是Markdown文件的拓展名，至于格式，so easy，常用就那么几个，搜索一下就好了。添加md文件之后就是你博客的新文章啦，然后在再执行上面部署的三步走，就可以更新你的博客了。</p>
<h4 id="写在最后："><a href="#写在最后：" class="headerlink" title="写在最后："></a>写在最后：</h4><p>还可以在这个基础上添加你自己的dns域名，和更换blog的主题，感兴趣的同学自己研究一下哇。</p>

        </div>
      </div>
    </div>
  </div>
</article>



    <!-- Footer -->
<footer>
  <div class="container">
    <div class="row">
      <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
        <p class="copyright text-muted">
          Theme By <a target="_blank" href="https://github.com/levblanc">Levblanc.</a>
          Inspired By <a target="_blank" href="https://github.com/klugjo/hexo-theme-clean-blog">Clean Blog.</a>
        <p class="copyright text-muted">
          Powered By <a target="_blank" href="https://hexo.io/">Hexo.</a>
        </p>
      </div>
    </div>
  </div>
</footer>


    <!-- After Footer Scripts -->
<script src="/js/highlight.pack.js"></script>
<script>
  document.addEventListener("DOMContentLoaded", function(event) {
    var codeBlocks = Array.prototype.slice.call(document.getElementsByTagName('pre'))
    codeBlocks.forEach(function(block, index) {
      hljs.highlightBlock(block);
    });
  });
</script>

  </body>
</html>

